
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../jquery/jquery-3.6.0.min.js"></script>
</head>
<body>
<div style="display: inline-block">
  <input type="text" id="myInput" value="">
  <select id="mySelect" style="display:none;"></select>
</div>

<script type="text/javascript">
  inputSelector();
  function inputSelector(){
    let ar = ['xx1','xx2','xx3','']
    $('#myInput').val('')
    $('#myInput').on('focus', function(){
      $('#mySelect').show();
      $('#mySelect').empty();
      ar.forEach(v=>{
        $('#mySelect').append($('<option>', {
          value: v,
          text: v
        }));
      })
      $('#myInput').val($('#mySelect').select().val())
    });
    $('#mySelect').on('change', function(){
      $('#myInput').val($(this).val());
      $('#mySelect').hide();
    });

  };
</script>
</body>
</html>
